﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6种精美纯CSS3丝带效果-sbkko.com</title>
<script src="https://www.sbkko.com/jquery/jquery-1.10.2.js"></script>
<style>
h2 {
	font-weight:normal;
	position:relative;
	background:#F4F9FA;
	width:50%;
	color:#F8463F;
	text-align:center;
	padding:10px 20px;
	margin:20px auto 40px;
	text-transform:uppercase;
	border-radius:2px;
}
h2:before,h2:after {
	content:"";
	position:absolute;
	display:block;
	top:-6px;
	border:18px solid #DCF4F4;
}
h2:before {
	left:-36px;
	border-right-width:18px;
	border-left-color:transparent;
}
h2:after {
	right:-36px;
	border-left-width:18px;
	border-right-color:transparent;
}
h2 span:before,h2 span:after {
	content:"";
	position:absolute;
	display:block;
	border-style:solid;
	border-color:#A7CECC transparent transparent transparent;
	top:-6px;
	-webkit-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	-o-transform:rotate(180deg);
	transform:rotate(180deg);
}
h2 span:before {
	left:0;
	border-width:6px 0 0 6px;
}
h2 span:after {
	right:0;
	border-width:6px 6px 0 0;
}
.silk-ribbon {
	display:block;
	width:48%;
	height:188px;
	position:relative;
	float:left;
	margin-bottom:30px;
    background-color: #ccc;
	color:white;
}
.silk-ribbon:nth-child(even) {
	margin-right:4%;
}
@media (max-width:500px) {
	.ribbon {
	width:100%
}
.silk-ribbon:nth-child(even) {
	margin-right:0%;
}
}
.silk-ribbon1 {
	position:absolute;
	top:-6px;
	right:10px;
}
.silk-ribbon1:after {
	position:absolute;
	content:"";
	display:block;
	width:0;
	height:0;
	border-left:53px solid transparent;
	border-right:53px solid transparent;
	border-top:10px solid #F8463F;
}
.silk-ribbon1 span {
	position:relative;
	display:inline-block;
	text-align:center;
	background:#F8463F;
	font-size:14px;
	line-height:1;
	padding:12px 8px 10px;
	border-top-right-radius:8px;
	width:90px;
}
.silk-ribbon1 span:before,.silk-ribbon1 span:after {
	position:absolute;
	content:"";
	display:block;
}
.silk-ribbon1 span:before {
	background:#F8463F;
	height:6px;
	width:6px;
	left:-6px;
	top:0;
}
.silk-ribbon1 span:after {
	background:#C02031;
	height:6px;
	width:8px;
	border-radius:8px 8px 0 0;
	left:-8px;
	top:0;
}
.silk-ribbon2 {
	display:inline-block;
	width:60px;
	padding:10px 0;
	background:#F47530;
	top:-6px;
	left:25px;
	position:absolute;
	text-align:center;
	border-top-left-radius:3px;
}
.silk-ribbon2:before {
	height:0;
	width:0;
	border-bottom:6px solid #8D5A20;
	border-right:6px solid transparent;
	right:-6px;
	top:0;
}
.silk-ribbon2:before,.silk-ribbon2:after {
	content:"";
	position:absolute;
}
.silk-ribbon2:after {
	height:0;
	width:0;
	border-left:30px solid #F47530;
	border-right:30px solid #F47530;
	border-bottom:30px solid transparent;
	bottom:-30px;
	left:0;
}
.silk-ribbon3 {
	display:inline-block;
	position:absolute;
	width:150px;
	height:50px;
	line-height:50px;
	padding-left:15px;
	background:#59324C;
	left:-8px;
	top:20px
}
.silk-ribbon3:before,.silk-ribbon3:after {
	content:"";
	position:absolute;
}
.silk-ribbon3:before {
	height:0;
	width:0;
	border-bottom:8px solid black;
	border-left:8px solid transparent;
	top:-8px;
	left:0;
}
.silk-ribbon3:after {
	height:0;
	width:0;
	border-top:25px solid transparent;
	border-bottom:25px solid transparent;
	border-left:15px solid #59324C;
	right:-15px;
}
.silk-ribbon4 {
	position:absolute;
	top:15px;
	padding:8px 10px;
	background:#00B3ED;
	box-shadow:-1px 2px 4px rgba(0,0,0,0.5);
}
.silk-ribbon4:before,.silk-ribbon4:after {
	position:absolute;
	content:"";
	display:block;
}
.silk-ribbon4:before {
	width:7px;
	height:100%;
	padding:0 0 7px;
	top:0;
	left:-7px;
	background:inherit;
	border-radius:5px 0 0 5px;
}
.silk-ribbon4:after {
	width:5px;
	height:5px;
	background:rgba(0,0,0,0.35);
	bottom:-5px;
	left:-5px;
	border-radius:5px 0 0 5px;
}
.silk-ribbon5 {
	display:inline-block;
	width:calc(100% + 20px);
	height:50px;
	line-height:50px;
	text-align:center;
	margin-left:-10px;
	margin-right:-10px;
	background:#EDBA19;
	position:relative;
	top:20px;
}
.silk-ribbon5:before {
	content:"";
	position:absolute;
	height:0;
	width:0;
	border-top:10px solid #cd8d11;
	border-left:10px solid transparent;
	bottom:-10px;
	left:0;
}
.silk-ribbon5:after {
	content:"";
	position:absolute;
	height:0;
	width:0;
	border-top:10px solid #cd8d11;
	border-right:10px solid transparent;
	right:0;
	bottom:-10px;
}
.wrap {
	width:100%;
	height:188px;
	position:absolute;
	top:-8px;
	left:8px;
	overflow:hidden;
}
.wrap:before {
	content:"";
	display:block;
	border-radius:8px 8px 0px 0px;
	width:40px;
	height:8px;
	position:absolute;
	right:100px;
	background:#4D6530;
}
.wrap:after {
	content:"";
	display:block;
	border-radius:0px 8px 8px 0px;
	width:8px;
	height:40px;
	position:absolute;
	right:0px;
	top:100px;
	background:#4D6530;
}
.silk-ribbon6 {
	display:inline-block;
	text-align:center;
	width:200px;
	height:40px;
	line-height:40px;
	position:absolute;
	top:30px;
	right:-50px;
	z-index:2;
	overflow:hidden;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	border:1px dashed;
	box-shadow:0 0 0 3px #57DD43,0px 21px 5px -18px rgba(0,0,0,0.6);
	background:#57DD43;
}</style>
</head>
<body>
<h2><span>CSS3 丝带</span></h2>
<div class="silk-ribbon"><span class="silk-ribbon1"><span>优惠</span></span>
</div>
<div class="silk-ribbon"><span class="silk-ribbon2">丝<br>带<br>效<br>果<br>2</span></div>
<div class="silk-ribbon"><span class="silk-ribbon3">丝带效果3</span></div>
<div class="silk-ribbon"><span class="silk-ribbon4">丝带效果4</span></div>
<div class="silk-ribbon"><span class="silk-ribbon5">丝带效果5</span></div>
<div class="silk-ribbon">
    <div class="wrap"><span class="silk-ribbon6">丝带效果6</span></div>
</div>

<script>

</script>

</body>
</html>
